@import url('../base.less');
@rem:10rem;

.sharebox {
	.openapp {
		padding: 15px;
		display: flex;
		justify-content: space-between;
		background: rgba(0, 0, 0, 0.5);
		position: relative;
		z-index: 1;

		.appicon {
			width: 45/@rem;
			height: 45/@rem;
			background: url('./icons/applogo.png') no-repeat center;
			background-size: 45/@rem 45/@rem;
			margin-right: 10px;
		}

		.describe {
			flex: 1;
			color: #fff;
			position: relative;
			height: 36/@rem;
			margin-top: 5/@rem;
			margin-bottom: 4/@rem;
		}

		.title{
			position: absolute;
			font-size: 17/@rem;
			left: 0;
			top: 0;
			width: 100%;
		}

		.content{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			font-size: 12/@rem;
		}
		
		.oneline {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.openbtn{
			width: 80/@rem;
			height: 32/@rem;
			line-height: 32/@rem;
			background: #FF0066;
			border-radius: 4px;
			color: #fff;
			text-align: center;
			font-size: 12/@rem;
			margin-left: 10px;
			margin-top: 7/@rem;
			margin-bottom: 6/@rem;
		}
	}

	.videobox{
		position: fixed;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: transparent;
		top: 0px;
		left: 0px;
		z-index: 0;
		color: #fff; 
		
		
		.playbtn {
			position: absolute; 
			left: 0; 
			top: 0;
			width: 100%; 
			height: 100%; 
			margin-top: 0;
			background: url('./icons/Home_play@2x.png') no-repeat center;
			background-size: auto;
			
			.screenshot{
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.playbox{
			position: absolute; 
			left: 0; 
			top: 0;
			width: 100%; 
			height: 100%;
			display: flex;
			align-items: center;
			background: #000;
		}

		.videoplay{
			width: 100%;
			height: auto; 
		}

		.content{
			position: absolute;
			left: 10px;
			bottom: 15px;
			right: 60/@rem;
			z-index: 1;

			.category{
				height: 25/@rem;
				width: auto;
				display: block;
			}
	
			.name{
				margin-top: 5px;
				font-size: 16/@rem;
			}
	
			.issue{
				margin-top: 5px;
				font-size: 14/@rem;
			}
	
			.detail {
				margin-top: 5px;
				font-size: 13/@rem;
				position: relative;
				display: inline-block;
				padding-right: 16px;

				&:after{
					content: '';
					position: absolute;
					top: 4/@rem;
					right: 0;
					width: 10/@rem;
					height: 9/@rem;
					background: url('./icons/Home_detail@2x.png') no-repeat center;
					background-size: 10/@rem 9/@rem;
				}
			}
		}

		.options{
			position: absolute;
			right: 10px;
			bottom: 15px;
			width: 50/@rem;
			z-index: 1;

			.user, .support, .reply, .forward{
				width: 50/@rem;
			}

			.user{
				height: 50/@rem;
				position: relative;
				margin-bottom: 40px;

				&:after{
					content: '';
					position: absolute;
					width: 26/@rem;
					height: 18/@rem;
					border-radius: 9/@rem;
					bottom: -12/@rem;
					left: 10/@rem;
					background: url('./icons/Home_follow_n@2x.png') no-repeat center;
					background-size: 26/@rem 18/@rem;
					z-index: 2;
				}
			}

			.uicon{
				width:100%;
				height: 100%;
				border-radius: 50%;
				overflow: hidden;
			}

			.sicon {
				margin: 0 auto;
				width: 25/@rem;
				height: 24/@rem;
				background: url('./icons/Home_like_n@2x.png') no-repeat center;
				background-size: 25/@rem 24/@rem;
			}

			.ricon {
				margin: 0 auto;
				width: 25/@rem;
				height: 24/@rem;
				background: url('./icons/Home_reply@2x.png') no-repeat center;
				background-size: 25/@rem 24/@rem;
			}

			.reply, .forward{
				margin-top: 20px;
			}

			.text{
				font-size: 12/@rem;
				color: #fff;
				text-align: center;
			}

			.ficon{
				margin: 0 auto;
				width: 26/@rem;
				height: 24/@rem;
				background: url('./icons/Home_forward@2x.png') no-repeat center;
				background-size: 26/@rem 24/@rem;
			}
		}
	}
}



